<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue水果管理 - 监听器版本</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div id="app">

    <!-- 弹层部分（新增、修改） -->
    <div class="dialog" style="width:200px;top:10vh;">
      <h3 class="dialog-head">
        <span id="dialogTitle">弹层标题</span>
        <span onclick="dialogShow(false)">&times;</span>
      </h3>

      <form name="fruitForm" class="dialog-body" autocomplete="off">
        <p>
          <label>水果名称</label><br>
          <input type="text" name="name">
        </p>
        <p>
          <label>水果单价</label><br>
          <input type="number" name="price">
        </p>
      </form>

      <p class="dialog-foot" align="right">
        <button onclick="dialogShow(false)">取消</button>
        <button onclick="onSaveData()">确认</button>
      </p>

    </div>

    <h1 align="center">水果管理</h1>

    <!-- 筛选部分 -->
    <p align="center" class="search">
      <button>批量删除</button>
      <input v-model.trim="query.keyword" type="search" placeholder="请输入关键词" size="20">
      <input v-model="query.startPrice" type="number" placeholder="开始价" class="w80">
      <input v-model="query.endPrice" type="number" placeholder="结束价" class="w80">
      <button>新增</button>
    </p>

    <!-- 列表部分 -->
    <table class="mytable">
      <thead>
        <tr>
          <th width="60"><input type="checkbox"></th>
          <th width="60">编号</th>
          <th class="sort">名称</th>
          <th width="120" class="sort">单价</th>
          <th width="230">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in searchData" :key="item.id">
          <td><input type="checkbox" :value="item.id" v-model="selectedList"></td>
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{'¥' + item.price.toFixed(2)}}</td>
          <td>
            <button>上移</button>
            <button>下移</button>
            <button>修改</button>
            <button>删除</button>
          </td>
        </tr>

        <!-- 如果没有数据的话显示这个 -->
        <tr v-if="!searchData.length">
          <td colspan="999" align="center">暂无数据</td>
        </tr>

      </tbody>
    </table>

    <!-- 页码部分 -->
    <p align="center"></p>

  </div>

  <script src="js/vue.global.js"></script>
  <script>
  Vue.createApp({
    data() {
      return {

        selectedList: [], // 选中的列表( 批量删除的id)

        // 查询条件（1. 关键词 2. 价格区间）
        query: {
          keyword: '',    // 关键词
          startPrice: '', // 开始价
          endPrice: ''    // 结束价
        },

        fruits: [
          { id: 1, name: '苹果', price: 8, checked: false },
          { id: 2, name: '桔子', price: 1, checked: false },
          { id: 3, name: '香蕉', price: 5, checked: false },
          { id: 4, name: '甘蔗', price: 12, checked: false },
          { id: 5, name: '橙子', price: 6, checked: false }
        ],

        // 搜索数据
        searchData: [],

      }
    },
    watch: {
      query: {
        handler(){
          // 获取用户输入的查询条件
          const { keyword, startPrice, endPrice } = this.query;

          // 监听查询条件变化，重新搜索，返回搜索的结果
          this.searchData = this.fruits.filter(item => {
            return item.name.includes(keyword) && 
                   (startPrice ? item.price >= startPrice: true) &&
                   (endPrice ? item.price <= endPrice: true);
          });
        },
        immediate: true, // 立即执行
        deep: true // 深度监听
      }
    }
  }).mount("#app");
  </script>

</body>

</html>